<template>
    <view class="box" >
        <view class="box-item" v-for="item in list" :key="item.id">   
            <view class="avatar">
                
                <u-image :src="item.avatar" mode=""
                width="60rpx" height="60rpx"  shape="circle">
                    <u-image slot="error" :show-loading="false"  src="@/static/image/home/avatar.png" width="60rpx" height="60rpx" />
                </u-image>
            </view>
            <view class="content">
                <view class="u-flex">
                    <view>
                        {{item.nickname}}
                    </view>
                    <image :src="`../../static/wode/LV${item.userlevel}.png`" mode=""
                    style="width: 78rpx;height: 31rpx;margin-left:23rpx;"></image>
                </view>
                <view class="u-flex u-row-between" style="color:#AAAAAA">
                    <view v-if="leftValue == 'commission'">
                        Total: {{item[leftValue]}}
                    </view>
                    <view v-else>
                        {{$t('team.one', {num:lvNumber[item.level]})}}
                    </view>
                    <view v-if="rightValue == 'today_commission'">
                        Today:{{$currency}}{{item.commission}}
                    </view>
                    <view v-if="rightValue == 'count_today_commission'">
                        Today:{{$currency}}{{item.today_commission}}
                    </view>
                    <view v-if="rightValue == 'time'">
                       {{item.createtime}}
                    </view>
                    <view v-if="rightValue == 'commission'">
                        {{$t('common.commission')}}:{{$currency}}{{item[rightValue]}}
                    </view>
                </view>
            </view>
            <!-- <view class="number1">
                {{ $currency }}{{item.commission}}
            </view>
            <view class="number2">
                {{ $currency }}{{item.today_commission}}
            </view> -->
        </view>
    </view>
</template>

<script>
	import {
		myteamlist,
		myteamtotal
	} from '@/api/team.js'
	export default{
		data() {
			return {
				list: [],
                lvNumber: ['-','A','B','C'],
			}
		},
        props: {
            listProp: {
                type: Array,
                default: []
            },
            leftValue: {
                type: String,
                default: ''
            },
            rightValue: {
                type: String,
                default: ''
            },
        },
        watch: {
            'listProp'() {
                this.list = this.listProp
            }
        },
		onLoad(option) {
			// this.load(option.level)
		},
		methods: {
			async load(val) {
				let result = await myteamlist({
					level: val,
					page: 1
				})
				this.list = result;
			}
		}
	}
</script>
<style lang="scss" scoped>
	
	.box{
		background: #fff;
		.box-item{
			display: flex;
			align-items: center;
			padding: 40rpx 0;
			border-bottom: 2rpx solid #ECECEC;
			.avatar{
				margin-right: 10rpx;
			}
			.content {
				flex:1;
			}
		}
		.box-item:last-child{
			border:none;
		}
	}
</style>
